import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import menuRoute from 'routes/menuRoute'
import { Form, Input, Button, Alert, message } from 'antd'
const FormItem = Form.Item;
const TextArea = Input.TextArea;

import RSService from 'containers/setting/role-setting/role-setting.service'
//import 'styles/setting/role-setting/finance-role/new-finance-role.scss'

class NewFinanceRole extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      roleDetail: menuRoute.getRouteItem('role-setting-finance-detail') //角色详情页
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.params.hasInit) {
      nextProps.params.hasInit = true;
      this.props.form.resetFields()
    }
  }

  handleSave = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({ loading: true });
        RSService.newFinanceRole(values).then(res => {
          this.setState({ loading: false });
          this.context.router.push(this.state.roleDetail.url.replace(':roleOID', res.data.roleOID));
          message.success(messages('common.save.success', {name: ''}))
        }).catch(() => {
          this.setState({ loading: false })
        })
      }
    })
  };

  handleCancel = () => {
    this.props.close()
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.state;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14, offset: 1 }
    };
    return (
      <div className="new-finance-role">
        <Form onSubmit={this.handleSave}>
          <Alert message={messages('setting.key956'/*角色编号保存后，不可修改。角色编号全公司内唯一。角色编号、角色名称最多20个字符。*/)}
                 type="info"
                 showIcon
                 className="info-alert"
                 style={{marginBottom:"10px"}}
          />
          <FormItem {...formItemLayout} label={messages('setting.key935'/*角色编号*/)}>
            {getFieldDecorator('roleID', {
              rules: [{
                required: true,
                message: messages('common.please.enter'),
              }, {
                max: 20,
                message: messages('common.max.characters.length', {max: 20})
              }, {
                validator: (rule, value, callback) => {
                  if (value && value.length <= 20) {
                    return RSService.judgeFinanceRoleExist(value).then(res => {
                      if (res.data) {
                        callback(messages('setting.key957'/*该角色编号在系统内已存在，请输入新的编号*/)) //该角色编号在系统内已存在，请输入新的编号
                      } else {
                        callback()
                      }
                    });
                  }
                  callback()
                }
              }],
              initialValue: ''
            })(
              <Input placeholder={messages('common.please.enter')} />
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('setting.key936'/*角色名称*/)}>
            {getFieldDecorator('roleName', {
              rules: [{
                required: true,
                message: messages('common.please.enter'),
              }, {
                max: 20,
                message: messages('common.max.characters.length', {max: 20})
              }],
              initialValue: ''
            })(
              <Input placeholder={messages('common.please.enter')} />
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('setting.key937'/*角色说明*/)}>
            {getFieldDecorator('roleDescription', {
              rules: [{
                max: 100,
                message: messages('common.max.characters.length', {max: 100})
              }],
              initialValue: ''
            })(
              <TextArea rows={3} style={{resize: 'none'}} />
            )}
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" htmlType="submit" loading={loading}>{messages('setting.key958'/*创建*/)}</Button>
            <Button onClick={this.handleCancel}>{messages('common.cancel')}</Button>
          </div>
        </Form>
      </div>
    )
  }
}

NewFinanceRole.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
  }
}

const wrappedNewFinanceRole = Form.create()(NewFinanceRole);

export default connect(mapStateToProps)(wrappedNewFinanceRole)
